<template>
	<xn-form-container
		:title="formData.productId ? '编辑商品' : '增加商品'"
		:width="700"
		v-model:open="open"
		:destroy-on-close="true"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="商品编码：" name="productCode">
						<a-input v-model:value="formData.productCode" placeholder="请输入编码" allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="商品名称：" name="productName">
						<a-input v-model:value="formData.productName" placeholder="请输入名称" allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="商品类型：" name="productType">
						<a-tree-select
							v-model:value="formData.productType"
							show-search
							style="width: 100%"
							:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
							placeholder="请选择上级类型"
							allow-clear
							tree-default-expand-all
							:tree-data="treeProductTypeData"
							:field-names="{
							  children: 'children',
							  label: 'productTypeName',
							  value: 'productTypeId',
							}"
							tree-node-filter-prop="productTypeName"
						></a-tree-select>

					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="商品规格：" name="productSpecifications">
						<a-input v-model:value="formData.productSpecifications" placeholder="请输入商品规格" allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="商品品牌：" name="brand">
						<a-input v-model:value="formData.brand" placeholder="请输入商品品牌" allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="计量单位：" name="measureUnit">
						<a-select v-model:value="formData.measureUnit" placeholder="请选择计量单位" :options="measureUnitOptions" />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item  name="costPrice">
						<template #label>
							<span>
							  成本价：
							  <a-tooltip title="采购的价格">
									<QuestionCircleOutlined />
							  </a-tooltip>
							</span>
						</template>

						<a-input-number v-model:value="formData.costPrice" :min="1" placeholder="请选择成本价" :max="10000" style="width: 100%" />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="销售价格：" name="univalence">
						<a-input-number v-model:value="formData.univalence" :min="1" placeholder="请选择销售价格" :max="10000" style="width: 100%" />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="物品条码：" name="productBarcode">
						<a-input v-model:value="formData.productBarcode" placeholder="请输入物品条码" allow-clear />
					</a-form-item>
				</a-col>
<!--				<a-col :span="12">-->
<!--					<a-form-item label="库存数量：" name="inventoryQty">-->
<!--						<a-input-number v-model:value="formData.inventoryQty" :min="0" placeholder="请选择库存数量" :max="10000" style="width: 100%" />-->
<!--					</a-form-item>-->
<!--				</a-col>-->
				<a-col :span="12">
					<a-form-item name="minQty">

						<template #label>
							<span>
							  库存预警数量：
							  <a-tooltip title="当即时库存超过这个阈值将通知提醒业务员库存不足">
									<QuestionCircleOutlined />
							  </a-tooltip>
							</span>
						</template>


						<a-input-number v-model:value="formData.minQty" :min="0" placeholder="请选择库存预警数量" :max="10000" style="width: 100%" />

					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item  name="maxQty">
						<template #label>
							<span>
							  库存积压数量：
							  <a-tooltip title="当即时库存超过这个阈值将通知提醒业务员库存积压严重">
									<QuestionCircleOutlined />
							  </a-tooltip>
							</span>
						</template>

						<a-input-number v-model:value="formData.maxQty" :min="0" placeholder="请选择库存积压数量" :max="10000" style="width: 100%" />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="默认仓库：" name="defaultWarehouse">
						<a-tree-select
							v-model:value="formData.defaultWarehouse"
							show-search
							style="width: 100%"
							:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
							placeholder="请选择默认仓库"
							allow-clear
							tree-default-expand-all
							:tree-data="wareTypeTreeData"
							:field-names="{
							  children: 'children',
							  label: 'wareName',
							  value: 'wareId',
							}"
							tree-node-filter-prop="wareName"
						></a-tree-select>
					</a-form-item>
				</a-col>

				<a-col :span="12">
					<a-form-item label="保质期：" name="expirationDate">
						<a-date-picker v-model:value="formData.expirationDate" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择保质期" style="width: 100%" />
					</a-form-item>
				</a-col>

				<a-col :span="12">
					<a-form-item label="状态：" name="status">
						<a-select v-model:value="formData.status" placeholder="请选择状态" :options="statusOptions" />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="备注：" name="remark">
						<a-textarea v-model:value="formData.remark" placeholder="请输入备注" :auto-size="{ minRows: 3, maxRows: 5 }" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup name="imsProductForm">
	import tool from '@/utils/tool'
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import imsProductApi from '@/api/ims/imsProductApi'
	import imsProductTypeApi from "@/api/ims/imsProductTypeApi";
	import imsWarehouseApi from "@/api/ims/imsWarehouseApi";
	// 抽屉状态
	const open = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({
		status: 'ENABLE',
		maxQty: 50,
		minQty: 0,
	})
	const submitLoading = ref(false)
	const measureUnitOptions = ref([])
	const statusOptions = ref([])

	const treeProductTypeData = ref([])
	const wareTypeTreeData = ref([])

	// 打开抽屉
	const onOpen = (record) => {
		open.value = true
		if (record) {
			let recordData = cloneDeep(record)
			formData.value = Object.assign({}, recordData)
		}
		measureUnitOptions.value = tool.dictList('unit')
		statusOptions.value = tool.dictList('COMMON_STATUS')

		// 分类
		imsProductTypeApi.productTypeTree().then(res => {
			treeProductTypeData.value = res
			console.log('树选择器：', res)
		})
		// 上级分类
		imsWarehouseApi.wareTree().then(res => {
			wareTypeTreeData.value = res
		})

	}
	// 关闭抽屉
	const onClose = () => {
		formRef.value.resetFields()
		formData.value = {
			status: 'ENABLE'
		}
		open.value = false
	}
	// 默认要校验的
	const formRules = {
		productCode: [required('请输入编码')],
		productName: [required('请输入名称')],
		productType: [required('请输入类型')],
		measureUnit: [required('请输入计量单位')],
		status: [required('请输入状态')],
	}
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value
			.validate()
			.then(() => {
				submitLoading.value = true
				const formDataParam = cloneDeep(formData.value)
				imsProductApi
					.imsProductSubmitForm(formDataParam, formDataParam.productId)
					.then(() => {
						onClose()
						emit('successful')
					})
					.finally(() => {
						submitLoading.value = false
					})
			})
			.catch(() => {})
	}
	// 抛出函数
	defineExpose({
		onOpen
	})
</script>
